<div ng-include="'dashboard/header.html'"></div>

<h3 id="report" style="margin-top:10px;height:20px;">{{ currentReport }}</h1>
<div ng-if="snapshot.isRunning" class="alert alert-warning">
	<p class="lead">Still Running...</p>
	Snapshot is still going through production.
	<a class="btn btn-default" ng-click="reloadSnapshot()">Refresh</a>
	<a class="btn btn-danger" ng-click="abortSnapshot()">Abort</a>
</div>

<div class="row" id="report-charts">
	<div class="col-md-3">
		<div id="nav">
			<div class="tree" onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';">
				<div ng-include="'dashboard/nav.html'" ng-model="nav"></div>
			</div>
		</div>
	</div>

	<div ng-if="reportLoadError" class="col-md-9">
		<div class="alert alert-danger">
			<p class="lead">Report Not Found</p>
			{{ reportLoadError }}
		</div>
	</div>

	<div ng-if="!reportLoadError" mb-task-area class="col-md-9">
		<div ng-show="loading">
			<img src="dashboard/images/loading.gif">
		</div>
		<div ng-show="!loading">

		<div ng-if="report.description">
			<div class="well well-sm">{{report.description}}</div>
		</div>

		<div class="pull-right" ng-show="report.report">
			<!-- Button to show raw content in modal -->
			<button type="button" class="btn btn-default" data-toggle="modal" data-target="#report-metadata-modal">Details</button>
			<a href="#/snapshot-template/edit?template={{ report.template }}" class="btn btn-default" style="margin-right: 4px">Template</a>
			<mb-task-control></mb-task-control>
		</div>

		<div ng-show="!report.isFormatted">
			<div compile-html="report.html"></div>
		</div>

		<div ng-show="report.isFormatted">
			<tabset>
				<tab active="tabs['bar'].active" ng-show="tabs['bar'].show">
					<tab-heading style="font-size:18pt;">
						<i class="fa fa-bar-chart"></i>
					</tab-heading>
					<chart
						ng-if="tabs['bar'].show"
					    data-file="{{ report.formattedReport.name }}"
					    type="bar"
					    x-axis="{{ report.formattedReport.chart.x }}"
					    x-label="{{ report.formattedReport.chart.x }}"
					    y-axis="{{ report.formattedReport.chart.y }}"
					    y-label="{{ report.formattedReport.chart.y }}"
					></chart>
				</tab>
				<tab ng-show="tabs['scatter'].show">
					<tab-heading style="font-size:18pt;">
						<i class="fa fa-area-chart"></i>
					</tab-heading>
					<chart
						ng-if="tabs['scatter'].show"
					    data-file="{{ report.formattedReport.name }}"
					    type="scatter"
					    x-axis="{{ report.formattedReport.chart.x }}"
					    x-label="{{ report.formattedReport.chart.x }}"
					    y-axis="{{ report.formattedReport.chart.y }}"
					    y-label="{{ report.formattedReport.chart.y }}"
					></chart>
				</tab>
				<tab active="tabs['table'].active">
					<tab-heading style="font-size:18pt;">
						<i class="fa fa-table"></i>
					</tab-heading>
					<mb-table ng-if="report.isFormatted && !loading" data-file="{{ report.formattedReport.name }}"></mb-table>
				</tab>
			</tabset>
		</div>

		</div>
	</div>
</div>

<!-- Modal for displaying raw report content -->
<div class="modal fade" id="report-metadata-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">{{currentReport}}</h4>
      </div>
      <div class="modal-body">
          <pre><code>{{report | json}}</code></pre>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>



<script>
	angular.element(document).ready(function() {
		setTimeout(function() {
			$('#nav').affix({
				offset: {
					top: 160
				}
			});
		}, 1);
	});
</script>
